<template>
    <div class="login" :style="{backgroundImage:'url('+loginImgUrl+')'}">

     <div class="login_list" >
        <p>后台管理系统</p>
        <div class="form">

            <div class="item">
            <input type="text" v-model="admin_content.adminUser" id="user" placeholder="用户名">
            </div>

            <div class="item">
            <input type="password" v-model="admin_content.adminPassword" id="password" placeholder="密码">
            </div>


            <div class="item">
            <input type="text" v-model="admin_content.code" id="code" placeholder="验证码">
            <img :src="codeImg" title="点击刷新验证码" @click="imgClick($event)">
            </div>

            <div class="item">
            <input type="button" value="后台登录" @click="submitClick">
            </div>

        </div>
    </div>



</div>
</template>

<script>
import {request} from '@/network/request'

export default {
    name:'Login',
    data(){
        return{
            codeImg:'',
            imgs:[
                {src:require('@/assets/img/login/login-img1.jpg')},
                {src:require('@/assets/img/login/login-img2.jpg')},
                {src:require('@/assets/img/login/login-img3.jpg')}
            ],
            loginImgUrl:'',
            admin_content:{
                adminUser:'',
                adminPassword:'',
                code:''
            }
        }
    },
    methods:{
        submitClick(){
            if(this.admin_content.adminUser === '' || this.admin_content.adminPassword === '' || this.admin_content.code === ''){
                alert('账号密码验证码不能为空');
            }else{
                request({
                    url:'/api/api_user_login.php',
                    data:this.admin_content
                }).then( res => {
                    switch(res.data.msg){
                        case '账号或密码错误':
                             alert('账号或密码错误')
                             break
                        case '验证码错误':
                            alert('验证码错误')
                            break
                        default:
                            //将数据存到cookie中
                            // document.cookie="adminToken="+ res.data.result.admin_token +"; path=/"
                            // document.cookie="adminName="+ res.data.result.admin_name +"; path=/"
                            //上面这种方法不好
                            //sessionStorage过期时间为关闭浏览器
                             if (typeof(Storage) !== "undefined") {
                                //储存数据
                                
                                sessionStorage.setItem("adminName",res.data.result.admin_name)
                                sessionStorage.setItem("adminToken",res.data.result.admin_token)
                            }


                            //修改vuex中的数据
                            this.$store.commit({
                                type:'upDateaAminToken',
                                token:res.data.result.admin_token
                            })

                            this.$store.commit({
                                type:'upDateaAdminName',
                                name:res.data.result.admin_name
                            })

                        
                            this.$router.replace('/Admin/home').catch(err => { console.log(err) })
                    }
                        
                }).catch( err => {
                    console.log(err)
                })
            }
        },
        imgClick(){
            this.codeImg = 'http://www.guoqi666.work/ins/picture_code.php?x =' +Math.ceil(Math.random()*100)
        }
    },
    created(){
        this.codeImg = 'http://www.guoqi666.work/ins/picture_code.php?x =' +Math.ceil(Math.random()*100)
        //注：内联直接写路径无效必须require导入或者import导入资源
        let length = this.imgs.length
        let num = 0
        this.loginImgUrl = this.imgs[0].src
            setInterval( () => {
                if(num < length -1 ){
                    num++
                }else{
                    num = 0
                }
               this.loginImgUrl = this.imgs[num].src
            },3000)
         
    },
	beforeRouteEnter(to,from,next) {
		next(vm => {
			if(vm.$store.state.adminToken != ''){
				vm.$router.replace('/Admin/home').catch(err => { console.log(err) })
			}
		})
	}
}
</script>

<style scoped>
.login{
    width: 100%;
    height: 100%;
    position: relative;
    background-repeat: no-repeat;
    background-size: 100%;
	z-index: 1;
}

.login .login_list{
    padding: 20px;
    position: absolute;
    left: 40%;
    top: 20%;
    width: 350px;
    background: rgba(255,255,255, 0.5);
    border-radius: 20px;
}
.login .login_list p{
    padding: 0;
    margin: 0;
    text-align: center;
    font-size: 25px;
    font-weight: bold;
    line-height: 50px;
}

.login .login_list .item{
    width: 100%;
}
.login .login_list .item img{
    float:right;
    margin-top: 5px;
}
.login .login_list .item input{
    height: 40px;
    margin: 10px 0px;
    font-size: 14px;
}
.login .login_list .item #user{
    width: 100%;
    text-indent: 1em;
}
.login .login_list .item #password{
    width: 100%;
    text-indent: 1em;
}
.login .login_list .item #code{
    width: 40%;
    text-indent: 1em;
}
.login .login_list .item input[type="button"]{
    width: 100%;
    font-size: 18px;
    font-weight: bold;
}
</style>